<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Kuchi Kopi</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
        integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
        crossorigin="anonymous" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
        integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
        crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Solway:wght@500&display=swap" rel="stylesheet">

</head>

<body>

    <nav class="navbar">
        <div class="logo">
            <h2>KUCHI KOPI</h2>
        </div>
        <a href="#" class="nav-btn">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navlinks">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="explore.html">Explore</a></li>
                <li><a href="meet.html">Meet</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>

    <div class="title">
        <h2> EXPLORE THE ISLAND OF KUCHI KOPI</h2>
    </div>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <video width=100% height=100% autoplay loop muted>

                    <source src="images/homie1.mp4">
                </video>
            </div>
            <div class="carousel-item">
                <video width=100% height=100% autoplay loop muted>
                    <source src="images/homie2.mp4">
                </video>
            </div>
            <div class="carousel-item">
                <video width=100% height=100% autoplay loop muted>
                    <source src="images/homie4.mp4">
                </video>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>
    <div class="history-container">
        <div class="history-img">
            <img src="images/test1.jpg">
        </div>
        <div class="history-text">
            <h2> OUR HISTORY</h2>
            <p>Kuchi Kopi is a beautiful town where the main fruit grown is Oranges (unfortunately). The town of Kuchi
                Kopi was built by a resident named Pancake. You can find Pancake busy
                whacking villagers on the head with nets, so come visit for a warm welcome gift! </p>
        </div>
    </div>
    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>

    <div class="owl-carousel owl-theme">
        <div class="item">
            <img src="images/owl1.jpg">
        </div>
        <div class="item">
            <img src="images/owl3.jpg">
        </div>
        <div class="item">
            <img src="images/owl4.jpg">
        </div>
        <div class="item">

            <img src="images/owl2.jpg">
        </div>
        <div class="item">
            <img src="images/owl5.jpg">
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
        integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
        crossorigin="anonymous"></script>
    <script type="text/javascript">
        $('.owl-carousel').owlCarousel({
            autoplay: 5000,
            loop: true,
            margin: 10,
            nav: true,
            pagination: false,
            dots: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 3
                }
            }
        })
    </script>


    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>

    <div class="things-text">
        <h2> THINGS TO DO </h2>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div class="grid-item">
                <img src="images/apple.png" class="apple">
                <h3>MUSEUM</h3>
            </div>
            <div class="grid-item">
                <img src="images/cherry.png" class="cherry">
                <h3>SHOPPING & DINING</h3>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="grid-item">
                <img src="images/coconut.png" class="coconut">
                <h3>CAMPING</h3>
            </div>
            <div class="grid-item">
                <img src="images/orange.png" class="orange">
                <h3>FISHING</h3>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="grid-item">
                <img src="images/pear.png" class="pear">
                <h3>PICKING FRUIT</h3>
            </div>
            <div class="grid-item">
                <img src="images/peach.png" class="peach">
                <h3>CATCHING BUGS</h3>
            </div>
        </div>
    </div>

    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>




    <div class="museum-container">
        <div class="museum-text">
            <h2> MUSEUM</h2>
            <p>The Kuchi Kopi Museum is chock full of wonderful sea creatures, bugs, dinosaurs, and more! However
                villager Pancake got too tired of digging fossils, so
                the only fossils you'll see on display is shown to the left (shhh). </p>
        </div>
        <div class="museum-img">
            <img src="images/dino.jpg">
        </div>

    </div>

    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>


    <div class="camping-container">
        <div class="camping-img">
            <video width="870" height="490" autoplay loop muted>
                <source src="images/campie.mp4">
            </video>
        </div>
        <div class="camping-text">
            <h2>CAMPING</h2>
            <p>Ah yes the great outdoors. Fresh Air. Kuchi Kopi is the perfect place to come for camping! But
                like...only this area because the rest is still under construction
                and full of weeds (but we don't need to tell everyone that). </p>
        </div>
    </div>


    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>


    <div class="fruit-container">
        <div class="fruit-text">
            <h2> FRUIT PICKING</h2>
            <p> Fresh Fruit! Kuchi Kopi is home of oranges, but we also grow 4 other fruits in our very own orchard! We
                have 24 trees consisting of apples,cherries,oranges,
                peaches, and pears! But you'll only see 8 of them, since villager Pancake ate the rest.</p>
        </div>
        <div class="fruit-img">
            <img src="images/fruities.jpg">
        </div>

    </div>

    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>


    <div class="bug-container">
        <div class="bug-img">

            <video width="870" height="490" autoplay loop muted>
                <source src="images/homie3.mp4">
            </video>
        </div>
        <div class="bug-text">
            <h2>CATCHING BUGS</h2>
            <p>Thanks to Villager Pancake not taking care of the town, we have an abundance of ants and more amazing
                bugs! Isn't variety amazing?
                Come down to catch some cool bugs! If you're lucky villager Pancake will give you a welcome gift. </p>
        </div>
    </div>

    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>

    <div class="dining-container">
        <div class="dining-text">
            <h2> SHOPPING & DINING</h2>
            <p>Kuchi Kopi has some fineeee Shopping and Dining options. We have two .. TWO stores that are still under
                construction. But swing by to check out the construction!</p>
        </div>
        <div class="dining-img">
            <img src="images/dining.jpg">
        </div>

    </div>

    <div class="explore-dot">
        <span class="exdot1"></span>
        <span class="exdot2"></span>
        <span class="exdot3"></span>
    </div>

    <div class="fish-container">
        <div class="fish-img">
            <video width="870" height="490" autoplay loop muted>
                <source src="images/fishie.mp4">
            </video>
        </div>
        <div class="fish-text">
            <h2>FISHING</h2>
            <p> Want to catch some fish? Well you're in luck because Kuchi Kopi is the place for you! We have hundreds
                of different fish to catch from, but you'll only catch the same sea bass all the time.</p>
        </div>
    </div>




    <script src="scripts.js"></script>
</body>

</html>